<template>
	<view class="communityPage">
		<u-card title="热门话题" sub-title="查看更多" :border="false" margin="0" :show-foot="false" :head-border-bottom="false"
		 @head-click="moreHotTopic" :full="true">
			<view class="hotTopic" slot="body">
<!--        :effect3d="true"-->
				<u-swiper :list="topicList" mode="rect" :title="true"  @click="handleTopic"></u-swiper>
			</view>
		</u-card>
		<u-gap bg-color="#F3F4F6" height="15"></u-gap>
		<u-card title="社区互动" sub-title="查看更多" margin="0" :full="true" @head-click="moreActive">
			<view slot="body" class="activeContent">
				<view v-if="activies.length<=0">
					<u-empty mode="data" text="暂无帖子数据"></u-empty>
				</view>
				<view class="activeItem" v-for="(activeItem,index) in activies" :key="index" v-if="activies.length>0" @click="viewTopicDetail(activeItem)">
					<view class="activeImg">
						<u-avatar :src="activeItem.avatar" size="mini" mode="circle"></u-avatar>
					</view>
					<view class="activeContent">
						<view class="activeBasic">
							<view class="username">{{activeItem.createdUserName}}</view>
							<view class="postDate">{{activeItem.createTime}}</view>
						</view>
						<view class="content">
							{{activeItem.title}}
						</view>
					</view>
				</view>
			</view>
			<view slot="foot">
				<view class="pubTopic">
					<u-icon name="order" label="我要发贴" color="#f29100" label-color="#f29100" @click="pubTopic"></u-icon>
				</view>
			</view>
		</u-card>
		<!-- 分隔漕 -->
		<u-gap bg-color="#F3F4F6" height="15"></u-gap>
		<!-- 闲置交易 -->
		<u-card title="闲置交易" sub-title="更多闲置" :showFoot="false" :full="true" margin="0rpx">
			<view class="idleContent" slot="body">
				<scroll-view scroll-x="true" class="idleScroll" :enable-flex="true">
					<view class="scrollItem" v-for="(idleItem,index) in idleList" @click="handleIdle(idleItem)" :key="index">
						<image :src="idleItem.coverUrl" class="idleItemImage"></image>
						<text class="idleItemTitle">{{idleItem.title}}</text>
					</view>
				</scroll-view>
			</view>
		</u-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//热门话题
				topicList: [],
				//社区互动话题
				activies: [],
				//闲置物品初始化
				idleList: [],
				//社区信息
				currentCommunity:{},
				ownerInfo:{},//业主信息
			}
		},
		onLoad() {
			//初始化获取热门话题
			this.getTop3Topics();
			
			//初始化交易信息
			this.getIdleList();

      this.getTop4Activies();
			
		},
		onShow() {
			//初始化互动
			this.getTop4Activies();
      this.getTop3Topics();
      this.ownerInfo = uni.getStorageSync('ownerInfo');
			this.currentCommunity = uni.getStorageSync('current_community');
		},
		methods: {
			//获取热门话题
			getTop3Topics() {
				/*this.topicList = [{
						id: '1',
						image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						id: '2',
						image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						id: '3',
						image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				];*/
        let currentCommunity = uni.getStorageSync('current_community');
        if(currentCommunity){
          let params = {
            communityId:currentCommunity.communityId,
            publicStatus:1,
            page:1,
            limit:3
          }
          this.$u.get('/new/new/invitation/miniPage',params).then(res=>{
            if(res.code==0){
              this.topicList = res.data.list
              this.topicList.map(item => {
                item.image = item.images[0].url
              });
            }
          })
        }
			},

			//获取更多热门话题
			moreHotTopic() {
				this.$u.toast('获取更多热门话题')
			},
			//点击具体的热门话题
			handleTopic(topicItem) {
				console.log('点击热门话题', topicItem)
				this.$u.toast(topicItem.title)
			},
			//获取互动信息
			getTop4Activies() {
				let currentCommunity = uni.getStorageSync('current_community');
				if(currentCommunity){
				  let params = {
				    communityId:currentCommunity.communityId,
            page:1,
            limit:10
          }
					this.$u.get('/new/new/invitation/miniPage',params).then(res=>{
						if(res.code==0){
							this.activies = res.data.list;
						}
					})
				}
			},
			//更多互动信息
			moreActive(){
        // this.$u.toast('获取更多互动')
				this.$u.route('pages/community/moreActivity/moreActivity')
			},
			//发布帖子
			pubTopic() {
        let ownerInfo = uni.getStorageSync('ownerInfo')
        if (!ownerInfo) {
          this.$u.toast('请先登录,再进行操作')
          return;
        }
        if (!this.ownerInfo.cardStatus||this.ownerInfo.cardStatus==2) {
          this.$u.toast('请先实名认证,再进行操作')
          return;
        }
				console.log('社区信息',this.currentCommunity)
				console.log('业主信息',this.ownerInfo)
				if(this.currentCommunity.communityId && this.ownerInfo){
					this.$u.route('pages/community/postTopic/postTopic');
				}else{
					this.$u.toast('请先认证社区并登录')
				}
			},
			//查看帖子明细
			viewTopicDetail(item){
				console.log('点击的item',item)
				this.$u.route({
					url:'pages/community/topicDetail/topicDetail',
					params:{
						id:item.id
					}
				})
			},
			//获取闲置物品列表
			getIdleList() {
				this.idleList = [{
						id: '1',
						coverUrl: require('@/static/indexIcon/xz.png'),
						title: '闲置交易说明'
					},
					{
						id: '2',
						coverUrl: require('@/static/indexIcon/jiaoyi.png'),
						title: '交易品交易事项'
					},
					{
						id: '3',
						coverUrl: require('@/static/indexIcon/mai.png'),
						title: '物品买卖更方便'
					}

				];
			},
			//点击闲置物品信息
			handleIdle(idleItem) {
				console.log('闲置物品', idleItem)
				this.$u.toast(idleItem.title)
			},
		}
	}
</script>

<style lang="scss">
	.communityPage {

		.activeContent {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;

			.activeItem {
				width: 100%;
				margin-bottom: 20rpx;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;

				.activeImg {}

				.activeContent {
					display: flex;
					flex-direction: column;
					width: 100%;
					margin-left: 15rpx;

					.activeBasic {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						width: 100%;
						color: #c0c4cc;

						.username {}

						.postDate {}
					}

					.content {
						width: 100%;
						margin-top: 20rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}


			}
		}

		.pubTopic {
			text-align: center;
		}

		.idleContent {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;

			.idleScroll {
				white-space: nowrap;
				width: 100%;

				.scrollItem {
					display: inline-flex;
					margin: 30rpx 20rpx;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.idleItemImage {
						width: 340rpx;
						height: 180rpx;
						border-radius: 10rpx;
						box-shadow: 2rpx 0rpx #C0C0C0;
					}

					.idleItemTitle {
						text-align: center;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						//font-size: 30rpx;
						width: 140rpx;
					}
				}
			}
		}
	}
</style>
